import React, { useEffect } from 'react'
import { Popover, Row, Col } from 'antd'
import { queryTrajectory, getCbrByCaseNo } from '~/api/query-api'

const content = (record: any) => {
  // const { caseCompanyName, createCompanyName, caseDepartmentName, createDepartmentName, caseName, caseNo,cbr } = record

  const CaseContent = () => (
    <div style={{ width: 700 }}>
      <Row style={{ marginTop: 10 }}>
        <Col span={12}>
          <label style={{ fontSize: 14, color: '#8c8c8c' }}>案件编号：</label>
          <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{record.caseNo}</span>
        </Col>
        <Col span={12}>
          <label style={{ fontSize: 14, color: '#8c8c8c' }}>案件名称：</label>
          <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{record.caseName}</span>
        </Col>
      </Row>
      <Row style={{ marginTop: 10 }}>
        <Col span={12}>
          <label style={{ fontSize: 14, color: '#8c8c8c' }}>办案单位：</label>
          <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>
            {record.caseCompanyName || record.createCompanyName}
          </span>
        </Col>
        <Col span={12}>
          <label style={{ fontSize: 14, color: '#8c8c8c' }}>办案部门：</label>
          <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>
            {record.caseDepartmentName || record.createDepartmentName}
          </span>
        </Col>
      </Row>
      <Row style={{ marginTop: 10 }}>
        <Col span={12}>
          <label style={{ fontSize: 14, color: '#8c8c8c' }}>承办人：</label>
          <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{record.cbr}</span>
        </Col>
      </Row>
    </div>
  )

  return <CaseContent />
}

const PopoverColumn = ({ children, record }: any) => {
  const getCbr = async () => {
    if (!record) return
    if (!record.caseNo) return
    const { data } = await getCbrByCaseNo({
      caseNo: record.caseNo
    })
    record.cbr = data
  }
  return (
    <Popover placement="topLeft" content={content(record)} trigger="click">
      {children}
    </Popover>
  )
}

export default PopoverColumn
